import React from 'react';
import { Search } from 'lucide-react';
import Card from './Card';

interface FilterOption {
  value: string;
  label: string;
}

interface FilterBarProps {
  searchValue: string;
  onSearchChange: (value: string) => void;
  searchPlaceholder?: string;
  filters?: Array<{
    value: string;
    onChange: (value: string) => void;
    options: FilterOption[];
    placeholder?: string;
  }>;
}

export default function FilterBar({
  searchValue,
  onSearchChange,
  searchPlaceholder = '搜索...',
  filters = [],
}: FilterBarProps) {
  return (
    <Card>
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="flex-1">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <input
              type="text"
              placeholder={searchPlaceholder}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
              value={searchValue}
              onChange={(e) => onSearchChange(e.target.value)}
            />
          </div>
        </div>
        {filters.length > 0 && (
          <div className="flex gap-2">
            {filters.map((filter, index) => (
              <select
                key={index}
                className="px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                value={filter.value}
                onChange={(e) => filter.onChange(e.target.value)}
              >
                {filter.placeholder && (
                  <option value="all">{filter.placeholder}</option>
                )}
                {filter.options.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            ))}
          </div>
        )}
      </div>
    </Card>
  );
} 